<template>
  <div id="SpecialArea">
    <Row :gutter="20">
      <Col :span="6">
        <div class="grid-content bg-purple">
          <a href="javascript:void(0)" @click="getCarList(2,'/BuyCar','')">
            <img src="../../../static/m_img/h_icon_1.png" alt>
            热门专区
          </a>
        </div>
      </Col>
      <Col :span="6">
        <div class="grid-content bg-purple">
          <a href="javascript:void(0)" @click="getCarList(3,'/BuyCar',3)">
            <img src="../../../static/m_img/h_icon_2.png" alt>
            日系专区
          </a>
        </div>
      </Col>
      <Col :span="6">
        <div class="grid-content bg-purple">
         <a href="javascript:void(0)" @click="getCarList(4,'/BuyCar','')">
            <img src="../../../static/m_img/h_icon_3.png" alt>
            练手专区
          </a>
        </div>
      </Col>
      <Col :span="6">
        <div class="grid-content bg-purple">
         <a href="javascript:void(0)" @click="getCarList(5,'/BuyCar','')">
            <img src="../../../static/m_img/h_icon_4.png" alt>
            准新车专区
          </a>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import { Row, Col } from "element-ui";
export default {
  data() {
    return {};
  },
  components: {
    Row,
    Col
  },
  methods:{
    getCarList(id,name,seriesType ){
       this.$router.push({
        path: name,
        query: {
          id: id,
          seriesType:seriesType
        }
      })
    }
  }
};
</script>
<style scoped lang='scss'>
#SpecialArea {
  background: #fff;
  padding: 10px 15px;
  margin-bottom: 10px;
  .grid-content {
    a {
      color: #666;
    }
    text-align: center;
    color: #666;
    img {
      display: block;
      margin: 0 auto;
      width: 40px;
    }
  }
}
</style>
